import { Flex, Hide, Show } from '@chakra-ui/react';

import { memo } from 'react';
import { ColorModeToggle } from '@tourfly/theme';

import AigcHeaderUser from '../AigcHeaderUser';

import DesktopNav from '@/common/components/DesktopNav';
import LanguagePicker from '@/common/components/LanguagePicker';
import Logo from '@/common/components/Logo';
interface HeaderProps {
  user: any;
  logoutFn: () => void;
}
const AigcHeader = ({ user, logoutFn }: HeaderProps) => {
  return (
    <Flex direction="column" w="full">
      <Flex w="full" h="40px" justify="space-between">
        <Flex w="35%">
          <Logo />
        </Flex>

        <Hide below="md">
          <Flex flex={{ base: 1, md: 'auto' }} flexGrow={1} justify="center">
            <DesktopNav />
          </Flex>
        </Hide>

        <Flex align="center" justify="end" w={{ sm: '75%', md: '35%' }}>
          <LanguagePicker />
          <ColorModeToggle />
          <AigcHeaderUser user={user} logoutFn={logoutFn} />
        </Flex>
      </Flex>
    </Flex>
  );
};

export default memo(AigcHeader);
